<template>
  <!-- 展示区 -->
  <div class="panel panel-body panel-primary">
    <ul>
      <li v-for="mes in MesList" :key="mes.id">
        <a href="javascript:;" @click="handClick(mes)">{{ mes.title }}</a>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data() {
    return {
      MesList: [
        { id: 'scsv01', title: '重大通知!!!', content: '9.9全部包邮送回家!' },
        {
          id: 'scsv02',
          title: '来活了阿福!!!',
          content: '已经得那个人已经苏醒了!',
        },
        {
          id: 'scsv03',
          title: '关于一条狗的使命!!!',
          content: '独自一狗穿越了大半个中国,最后回到了家乡!',
        },
      ],
    };
  },
  methods: {
    handClick(mes) {
      this.$router
        .replace({
          name: 'xiang',
          params: {
            id: mes.id,
            title: mes.title,
            content: mes.content,
          },
        })
        // 捕获路由内部异常错误
        .catch(() => {});
    },
  },
};
</script>

<style scoped></style>